<template>
  <div class="home">
    <el-container>
          <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1" ><img class="a" src="../tlc/img/快递2 (1).png"/></el-menu-item>
                  <el-menu-item index="0" class="z">首页</el-menu-item>
                  <el-menu-item index="2" class="z">物理服务</el-menu-item>
                  <el-menu-item index="3" class="z">智能科技</el-menu-item>
                  <el-menu-item index="4" class="z">服务支持</el-menu-item>
                  <el-submenu index="2"  class="z">
                  <template slot="title"  class="z">关于我们</template>
                  <el-menu-item index="2-1">选项1</el-menu-item>
                  <el-menu-item index="2-2">选项2</el-menu-item>
                  <el-menu-item index="2-3">选项3</el-menu-item>
                  </el-submenu>
                <div class="dd"><router-link :underline="false" to="/login">快速登录/注册</router-link></div>
            </el-menu>
        </el-header>
    <br/>
    <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in 1" :key="item">
          <h1><img src="../tlc/img/R-C (8).jpg" class="tp" style="width:100%"/></h1>
        </el-carousel-item>
        <el-carousel-item v-for="item in 1" :key="item">
          <h1><img src="../tlc/img/72.png" class="tp" style="width:100%"/></h1>
        </el-carousel-item>
      </el-carousel>
        <el-tabs v-model="activeName" stretch >
        <el-card class="box-card">
          <div  class="text item">
            <div style="margin-top: 5px;">  
          </div>
          </div>
        </el-card>
    <el-menu  :default-active="activeIndex2" class="wc" mode="horizontal"  @select="handleSelect"  background-color="#f0f4ee00"
      text-color="#fff"
      active-text-color="#a0d919" style="width:100%">
          <el-menu-item index="4" class="a1"> <router-link :underline="false" to="/huoy"><img src="../tlc/img/45transport.png"/><br/><span class="zt">货源</span></router-link><span></span></el-menu-item>
          <el-menu-item index="4" class="a2"> <router-link :underline="false" to="/sjrz"><img  src="../tlc/img/006-快递员.png"/><br/><span class="zt">司机认证</span></router-link><span></span></el-menu-item>
          <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/wdrw"><img src="../tlc/img/我的任务.png"/><br/><span class="zt">我的任务</span></router-link><span></span></el-menu-item>
          <el-menu-item index="4" class="a4"> <router-link :underline="false" to="/wdcl"><img  src="../tlc/img/快递查询 (3).png"/><br/><span class="zt">我的车辆</span></router-link><span></span></el-menu-item>
        </el-menu>
       </el-tabs>
          <el-main>
              <h3>常用功能</h3>
          <el-tabs v-model="activeName1"  stretch  @tab-click="handleClick">
          <el-tab-pane  name="second" >     
            <el-row>
              <el-col :span="8">
                <el-card :body-style="{ padding: '30px' }" class="ww">
                   <img src="../tlc/img/90.jpg" style="width:65%"/>
                  <div style="padding: 1px;">
                    <span>电子合同</span>
                    <div class="bottom clearfix">
                      <time class="time">为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务</time>
                      <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                  </div>
                </el-card>
                
              </el-col>
           
            
            <el-col :span="8">
                <el-card :body-style="{ padding: '30px' }" class="w1">
                <img src="../tlc/img/R-C (7).png" style="width:65%"/>
                  <div style="padding: 14px;">
                    <span>货车导航</span>
                    <div class="bottom clearfix">
                      <time class="time">为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务</time>
                      <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>

                    
            <el-col :span="8">
                <el-card :body-style="{ padding: '30px' }" class="w2">
                <img src="../tlc/img/v2.png" style="width:65%"/>
                  <div style="padding: 14px;">
                    <span>货车导航</span>
                    <div class="bottom clearfix">
                      <time class="time">为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务</time>
                      <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row> 
          </el-tab-pane>
              </el-tabs>
          </el-main>

          <el-footer class="ss"> 
          <h1><img src="../tlc/img/11.png" style="width:100%"/></h1>
        </el-footer>
    </el-container>
  </div>
</template>

<script>
 export default {
    data() {
      return { 
       input3: '',
        activeName1: 'second',
        activeIndex: '1',
        activeIndex2: '1',
        
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      
      },
 }
</script>

<style scoped>
 .el-select .el-input {
    width: 50px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: rgb(254, 248, 248);
  }

.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
float:left; 
position:absolute;
    font: 100;
    width: 500px;
    height: 130px;
 margin: 510px auto; 

  background-color: rgb(248, 247, 248);

  }
.tp{
    position: relative;
  height: 600px;
}
 .el-carousel__item h1 {
    color: #f0f4ee00;
    font-size: 18px;
    opacity: 0.75;
    line-height: 1000px;
    margin: 0;
  }

.el-menu-demo{
   width: 1460px;
  margin: 16px auto; 
 

}
.ss{
  width: 1500px;
   position: relative;
}
.z{
   font-size: 18px;
   color: #000;
   
}
.wc{
    margin: 0px auto; 
  height: 130px;
  position: relative;

}

.ww{
  background-color: #eaf0ff;
  width:350px;
  height:250px;
   position: relative;
    left:10px;
    margin: -5px auto; 
   text-align: center;
}
.w2{
  background-color: #eaf0ff;
  width:350px;
  height:250px;
   position: relative;
    left: 40px;
    margin: -5px auto; 
   text-align: center;
}
.w1{
  background-color: #eaf0ff;
  width:350px;
  height:250px;
   position: relative;
    left: 30px;
    margin: -5px auto; 
   text-align: center;
}
.zt{

     margin: -5px auto; 
    text-align: center;
   font-size: 29px;
   color: rgba(9, 0, 0, 0.846);
     position: relative;
}
 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
.a1{
  position: relative;
  left: 180px;
}
.a2{
  position: relative;
  left: 340px;
}
.a3{
  position: relative;
  left: 510px;
}
.a4{
  position: relative;
  left: 680px;
}

.el-icon-more{
text-align: right;
   color: #0b1b0b;
   height: 30%;
   margin: 30px auto; 

}
.dd{
text-align: right;
}
el-menu-item{
  size: 0cm;
  color: #000;
}
.a{
     margin: -17px auto; 
     left: 50%;     
}

  .el-container{
     margin: -10px auto; 
     margin-left: -10px;
     margin-right: -10px;

  }
.el-header,
.el-footer {

  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
    border-radius: 4px
}

.el-aside {
  background-color: #c7d6f9;
  color: #333;
  text-align: center;
  line-height: 200px;
    border-radius: 4px
}

.el-main {
  background-color: #f4f6f9;
  color: #333;
  font-size: 25px;
  text-align: center;
  line-height: 40px;
    border-radius: 4px
}
.home{
  background-color:#f5f7fa

}
.demo-image__lazy{
     height: 440px;
     margin: -10px auto; 
     text-align: center;
}
.el-carousel__item h3 {
    position: relative;
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 900px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>